import 'babel-polyfill';
import { createApp } from 'vue';
import { createMetaManager, defaultConfig } from 'vue-meta';
import ElementPlus from 'element-plus';
import { transformLang } from '@/utils/tools';
import App from './App.vue';
import router from '@/router/index.js';
import store from '@/store/index.js';
import { i18n } from '@/locales';
import onlyNumber from '@/directive/only-number';

const app = createApp(App);

app.config.globalProperties.$locale = computed(() => {
    document.querySelector('html').lang = transformLang(i18n.global.locale.value);
    return i18n.global.locale.value;
});

app.config.globalProperties.$theme = computed(() => store.state.common.theme);

window.addEventListener('DOMContentLoaded', async () => {
    app
        .use(i18n)
        .use(router)
        .use(ElementPlus)
        .use(createMetaManager(false, {
            ...defaultConfig,
            meta: {
                tag: 'meta',
                nameless: true,
            },
        }))
        .use(store)
        .directive('onlyNumber', onlyNumber)
        .mount('#app');
});
